<template>
    <div 
    class="list-item"
    :class="{todo: ['3', '5'].includes(data.shbj)}"
    >
        <div class="left">
            <div class="title">
                <el-checkbox v-show="batch" v-model="checked" @change="cbChangeHandler" :disabled="!~['7'].indexOf(data.shbj)"></el-checkbox>

                服务详情
            </div>

            <div class="row" v-if="!!data.typename">
                <div class="text">
                    <div v-for="item in data.typename.split(',')" :key="item" class="item-box">
                        {{item}}
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="text">
                    <!-- 待办申请：
                    {{data.catypename}} -->

                    <a v-if="data.noticeurl" class="notice-link" :href="data.noticeurl" target="_blank">
                        <!-- <i class="el-icon-link"></i>招标公告链接 -->
                        查看招标公告
                    </a>

                    <a href="#" v-if="~['5','6','7','8'].indexOf(data.shbj)" onclick="return false;" class="notice-link" @click="openInfo">查看提交资料信息</a>

                </div>
            </div>

            <div class="row">
                <div class="text">
                    提交时间：{{data.addtime}}
                </div>
            </div>

        </div>
        <div class="right">
            <div class="title">
                <div class="left">
                    状态
                </div>

                <div class="right">

                </div>
            </div>

            <template>
                <div class="row">
                    <div class="text">
                        <span class="status">
                            {{getTextByStatus(data.shbj)}}
                        </span>

                        <span class="tips" v-if="data.shbj === '8'">
                            {{data.content}}
                        </span>
                    </div>
                </div>
            </template>

            <template v-if="data.shbj === '8'">

                <div class="row">
                    <div class="text">
                        完成时间：
                    </div>

                    <div class="text">
                        {{data.uptime}}
                    </div>
                </div>
            </template>

            <div class="row">
                <!-- <el-button 
                v-if="data.shbj === '7'"
                size="small"
                type="primary"
                icon="el-icon-delete" 
                @click="delHandler"
                >
                    删除
                </el-button> -->

                <el-button v-if="data.shbj === '3'" size="small" type="primary" icon="el-icon-tickets" @click="goPay">
                    去支付
                </el-button>

                <el-button v-if="data.shbj === '5'" size="small" type="primary" icon="el-icon-tickets" @click="completeInfo">
                    电脑端完善信息
                </el-button>

                <el-button v-if="data.shbj === '5'" size="small" type="primary" icon="el-icon-mobile" @click="completeInfoByMobile">
                    手机端完善信息
                </el-button>

                <!-- <el-button 
                v-if="data.shbj === '6'"
                size="small"
                type="primary"
                icon="el-icon-tickets" 
                @click="editPostInfo"
                >
                    修改邮寄信息
                </el-button> -->

                <el-button v-if="data.shbj === '8'" size="small" type="primary" icon="el-icon-tickets" @click="goto('/user/center/order')">
                    申请发票
                </el-button>
            </div>
        </div>

        <my-dialog v-model="dialogVisible" :title="dialogTitle" :width="dialogWidth">
            <component v-if="dialogVisible" :is="dialogComponent" :data="data" @close="dialogClose"></component>
        </my-dialog>

        <dialog-pay ref="payer" @success="paySuccessHandler" @closeNoPay="closeNoPay"></dialog-pay>
    </div>
</template>

<script>
import { getTextByStatus } from '../../../js/status.js';

import FormPost from './form-post';
import FormInfo from './form-info';
import DetailInfoQrcode from './detail-info-qrcode.vue';
import FormPerfect from './form-perfect.vue';
import DialogPay from '../../../components/dialog-pay.vue';

export default {
    props: {
        batch: {
            type: Boolean,
            default: false,
        },
        data: {
            type: Object,
            default: () => ({}),
        },
        batchCheck: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            dialogVisible: false,
            dialogTitle: '',
            dialogComponent: null,
            dialogWidth: '',

            checked: false,
        };
    },
    components: { DialogPay },
    watch: {
        batchCheck: {
            handler(val) {
                if (!~val.indexOf(this.data)) {
                    this.checked = false;
                }
            },
            deep: true,
        },
    },
    methods: {
        //打开提交信息
        openInfo() {
            this.dialogTitle = '提交信息';
            this.dialogWidth = '800px';
            // this.dialogData = row;
            this.dialogComponent = FormPerfect;
            this.dialogVisible = true;
            return false;
        },

        // 列表中复选框选中事件
        cbChangeHandler(val) {
            var arr = this.batchCheck,
                guid = this.data;

            if (val) {
                arr.push(guid);
            } else {
                var index = arr.indexOf(guid);

                arr.splice(index, 1);
            }

            this.$emit('update:batchCheck', arr);
        },
        // 删除
        delHandler(row) {
            this.$emit('del', row);
        },
        getTextByStatus,
        dialogClose() {
            this.dialogVisible = false;

            this.$emit('update');
        },
        // 完善信息
        completeInfo() {
            this.dialogTitle = '电脑端完善信息';
            this.dialogWidth = '500px';
            this.dialogComponent = FormInfo;

            this.dialogVisible = true;
        },
        completeInfoByMobile() {
            this.dialogTitle = '手机端完善信息';
            this.dialogWidth = '500px';
            this.dialogComponent = DetailInfoQrcode;

            this.dialogVisible = true;
        },
        // 添加邮寄信息
        completePostInfo() {
            this.dialogTitle = '完善邮寄信息';
            this.dialogWidth = '500px';
            this.dialogComponent = FormPost;

            this.dialogVisible = true;
        },
        editPostInfo() {
            this.dialogTitle = '修改邮寄信息';
            this.dialogWidth = '500px';
            this.dialogComponent = FormPost;

            this.dialogVisible = true;
        },
        // 支付
        goPay() {
            // 判断，订单是否存在，是否超时。
            this.$get(
                `${this.$store.state.api.webUrl}/elecbidding/orderroute.json`,
                {
                    guid: this.data.guid,
                },
                (data) => {
                    if (data.status == '1') {
                        //支付参数
                        let proData = {
                            projecttype: 'electronic_bidding',
                            projectnames: '电子投标服务',
                            projectids: this.data.guid,
                            realamount: this.data.real_amount,
                            productnum: 1,
                        };
                        // 调起支付
                        this.$refs.payer.initHandler(proData);
                    } else {
                        this.goto('/user/center/order');
                    }
                }
            );
        },
        //未支付成功
        closeNoPay() {
            showMsgBox('检测到您取消支付，在个人中心可以查看到此订单，半个小时内可继续完成支付');
        },

        paySuccessHandler() {
            this.$emit('paySuccess');
            showMsgBox('支付成功!', 'success');
        },
    },
};
</script>

<style scoped lang="scss">
@import '@css/var.scss';

.list-item {
    overflow: hidden;
    padding: 20px 0;
    cursor: default;
    position: relative;

    & + .list-item:before {
        content: '';
        width: 100%;
        height: 1px;
        background: #f0f0f0;
        position: absolute;
        top: 0;
    }

    .title {
        font-size: 16px;
        font-weight: 600;
        color: #333333;
        line-height: 1em;
        overflow: hidden;
        margin-bottom: 16px;

        .left {
            float: left;
            color: #333333;
        }

        .right {
            float: right;

            ::v-deep {
                .el-button--text {
                    padding: 0;
                }
            }
        }
    }

    & > .left {
        width: 60%;
        float: left;
    }

    & > .right {
        width: 40%;
        float: left;
    }

    .row {
        color: #666;
        margin-top: 6px;
        overflow: hidden;
        width: 90%;
        line-height: 1em;

        .text {
            float: left;
        }

        & + .row {
            margin-top: 14px;
        }
    }
    .item-box {
        display: inline-block;
        padding: 5px 10px;
        border: 1px solid $primaryColor;
        color: $primaryColor;
        margin-right: 10px;
        cursor: pointer;
    }

    .status {
        // color: $dangerColor;
    }

    .tips {
        color: #868686;
        margin-left: 1em;
    }
}

.notice-link {
    color: $primaryColor;
    margin-right: 1em;
}
</style>